<template>
	<view class="fahuo">
		<view class="fahuo_main">
			<view class="topA" v-if="Object.keys(addressList).length == 0" @click="onClickHandle('', 'toAddress', {})">
				<view class="top_box">
					<u-icon name="plus-circle" color="#A084F0" size="18" class="left"></u-icon>
					<view class="add_text">添加收货地址</view>
					<u-icon name="arrow-right" color="#222222" size="18" class="right"></u-icon>
				</view>
			</view>
			<view class="topB" v-if="Object.keys(addressList).length > 0" @click="onClickHandle('', 'toAddress', {})">
				<view class="top_box">
					<view class="left" v-if="addressList.is_default == '1'">默认</view>
					<view class="center">
						<view class="top">
							<text class="first">{{ addressList.consignee }}</text>
							<text class="last">{{ addressList.phone }}</text>
						</view>
						<view class="bottom">{{ addressList.province_name }}{{ addressList.city_name
              }}{{ addressList.area_name }}{{ addressList.address }}</view>
					</view>
					<u-icon name="arrow-right" color="#222222" size="18" class="right"></u-icon>
				</view>
			</view>
			<view class="main">
				<view class="title">发货商品</view>
				<view class="box" v-for="(item, index) in boxData.list" :key="index">
					<img :src="item.goods_image_text" alt="" />
					<view class="right_box">
						<view class="biaoti">{{ item.goods_name }}</view>
						<view class="biaoqian">
							<text class="biaoqian_box" v-for="(data, index) in item.service_lab"
								:key="index">{{ data }}</text>
						</view>
						<view class="shuoming">不支持7日内无理由退货</view>
						<view class="price_line">
							<view class="price">
								<text class="fuhao">￥</text>
								<text class="price_num">{{ item.original_price }}</text>
							</view>
							<view class="shu_box">
								<text class="fuhao">x</text>
								<text class="shuliang">{{ item.number }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="line">
					<view class="left">发货时间</view>
					<view class="right">您的商品将在7日内发出</view>
				</view>
				<view class="line">
					<view class="left">运费</view>
					<view class="right">¥{{ boxData.postage }}</view>
				</view>
				<view class="line">
					<view class="left">优惠券</view>
					<view class="right" v-if="!youhuiquan" @click="onClickHandle('', 'showUseCoupon', {})">
						<text v-if="!isSelectCoupon">请选择优惠券</text>
						<text v-if="isSelectCoupon">已减￥50</text>
						<u-icon name="arrow-right" color="#8C8C8C" size="18" class="icon"></u-icon>
					</view>
					<!-- <view class="right" v-if="youhuiquan">暂无优惠券可用</view> -->
				</view>
				<view class="beizhu">
					<view class="left">备注</view>
					<input type="text" placeholder-style="color:#8C8C8C;;font-size: 18rpx;"
						placeholder="选填，建议留言前与商家沟通确认" v-model="remark" />
				</view>
				<view class="bottom">
					<text class="xiaoji">共{{boxData.list.length}}件商品 小计：</text>
					<text class="fuhao">￥</text>
					<text class="price">{{ boxData.postage }}</text>
				</view>
		
		
					
				<view v-if="boxData.actlist&&boxData.actlist.length" class="title" style="color:red;">赠送商品</view>
				<view class="box" v-for="(item, index) in boxData.actlist" :key="index">
					<img :src="item.goods_image_text" alt="" />
					<view class="right_box">
						<view class="biaoti">{{ item.goods_name }}</view>
						<view class="biaoqian">
							<text class="biaoqian_box" v-for="(data, index) in item.service_lab"
								:key="index">{{ data }}</text>
						</view>
						<view class="shuoming">不支持7日内无理由退货</view>
						<view class="price_line">
							<view class="price">
								<text class="fuhao">￥</text>
								<text class="price_num">{{ item.original_price }}</text>
							</view>
							<view class="shu_box">
								<text class="fuhao">x</text>
								<text class="shuliang">{{ item.act_goods }}</text>
							</view>
						</view>
					</view>
				</view>
				
		
		
			</view>
		
		
			<view class="shuoming_box">
				<view class="title">运费说明</view>
				<view class="" style="padding:30rpx;">
					<view v-html="yunPrice"></view>
				</view>
				<!-- <rich-text :nodes="yunPrice"></rich-text> -->
				
				<!-- <view class="text">满三件包邮。可配送地区为中国大陆地区（除特殊偏远地区），收件地址在此之外的区域请勿下单。</view> -->
			</view>
			<view class="mustKnow">
				<switch type="checkbox" :checked="switch2Checked" @change="switch2Change" color="#A084F0"
					class="switch" />
				<text class="left">我已阅读并同意</text>
				<text class="right" @click="onClickHandle('', 'letllustrate', {})">《用户购买须知》</text>
			</view>
			<view class="pay">
				<view class="heji">合计:</view>
				<view class="fuhao">￥</view>
				<view class="sum_price">{{ boxData.postage }}</view>
				<view class="pay_btn" @click="onClickHandle('', 'toPay', {})" v-if="boxData.postage > 0">立即支付</view>
				<view class="quePay_btn" @click="onClickHandle('', 'toFahuo', {})" v-if="boxData.postage == 0">确认发货
				</view>
			</view>
		</view>
		<shopro-pay-model @changePayMod="changePayMod" @payed="onPayed" ref="paymodel" v-if="payModOpen" :iscoupon="1"
			activity-type="freight" :details="payDetails"></shopro-pay-model>
		<u-popup mode="bottom" border-radius="20" closeable v-model="showIllustrate">
			<view class="content-illustrate" style="padding:15px;">
				<scroll-view scroll-y="true" style="height: 60vh">
					<view v-html="illustrate"> </view>
					<!-- <rich-text :nodes="illustrate"></rich-text> -->
				</scroll-view>
			</view>
		</u-popup>
		<!-- <shoproUseCoupon
      v-if="showCoupon"
      :show="showCoupon"
      @noShow="noshowCoupon"
      @useCoupon="useCoupon"
    ></shoproUseCoupon> -->
	</view>
</template>
<script>
	import tools from '@/shopro/utils/tools';
	const _delay = tools.delayDither(300);
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	//import shoproUseCoupon from '@/components/shopro-coupon/shopro-use-coupon.vue';
	export default {
		// 建议 创建每个组件时 都添加name属性 标识组件名称
		name: '',
		//components: { shoproUseCoupon },
		data: () => ({
			switch2Checked: false,
			youhuiquan: false,
			youfei: true,
			ids: {},
			remark: '', //备注
			pay_type: '', //支付方式:wechat=微信支付,alipay=支付宝,wallet=钱包支付,score=积分支付
			platform: '', //平台:H5=H5,wxOfficialAccount=微信公众号,wxMiniProgram=微信小程序,App=App
			address_id: '', //收货地址id
			boxData: {},
			addressList: {},
			order_sn: '', //订单号
			payModOpen: false,
			payDetails: {},
			illustrate: '',
			showIllustrate: false,
			yunPrice: '',
			showCoupon: false,
			isSelectCoupon: false
		}),
		// 计算属性 适配者模式
		computed: {},
		// 数据监听
		watch: {},
		created() {
			// uni.setStorageSync('addressKey', {});
		},
		mounted() {
			// this.ids = this.$Route.query.ids;
			// this.affirm_deliverList();
			// this.getAddress();
		},
		onLoad(option) {
			//盒柜传过来的商品id
			this.ids = this.$Route.query.ids;
			//获取商品列表
			this.affirm_deliverList();
			//运费说明
			this.getyunPrice();
			//一进来页面首先判断本地存储时候存储着上一次使用的地址
			let ifStorage = uni.getStorageSync('addressKey') || {};
			//本地存储有地址直接用，没有的话就请求接口获取
			if (JSON.stringify(ifStorage) != '{}') {
				this.addressList = ifStorage;
			} else {
				this.getAddress();
			}
			
			if(uni.getStorageSync('xieyi')){
				this.switch2Checked = true
			}
		},
		// 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
		onShow() {
			
		},
		// 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听页面隐藏
		methods: {
			...mapMutations(['CartOnshow']),
			//获取地址列表
			getAddress() {
				return new Promise((resolve, reject) => {
					this.$http('address.list', {}, '请稍等').then((res) => {
						if (res.code === 1) {
							if (res.data.length > 0) {
								this.addressList = {};
								//如果有默认地址选用默认地址，否则选用第一条地址

								res.data.forEach((item, index) => {
									// 有默认地址
									if (item.is_default == '1') {
										this.addressList = res.data[index];
									} else {}
								});
								//无默认地址
								if (Object.keys(this.addressList) == 0) {
									this.addressList = res.data[0];
								}

								//处理手机号码
								if (this.addressList.phone.length > 0) {
									this.addressList.phone =
										this.addressList.phone.substr(0, 3) +
										'****' +
										this.addressList.phone.substr(7);
								}
							} else {
								this.addressList = {};
							}
							resolve(res.data);
						} else {
							reject();
						}
					});
				});
			},
			//获取发货商品列表
			affirm_deliverList() {
				return new Promise((resolve, reject) => {
					this.$http('v1.affirm_deliverList', {
						ids: this.ids
					}, '请稍等').then(
						(res) => {
							if (res.code === 1) {
								res.data.actlist =[]
								for(var i = res.data.list.length-1;i>=0;i--){
									if(res.data.list[i].act_goods > 0){
										if(res.data.list[i].act_goods == res.data.list[i].number){
											res.data.actlist.push(res.data.list[i])
											res.data.list.splice(i,1)
										}else{
											res.data.list[i].number = res.data.list[i].number - res.data.list[i].act_goods
											res.data.actlist.push(res.data.list[i])
										}
									}
								}
								this.boxData = res.data;
								resolve(res.data);
							} else {
								reject();
							}
						}
					);
				});
			},
			//支付接口
			toGetpay() {
				return new Promise((resolve, reject) => {
					this.$http(
						'v1.prepay', {
							order_sn: this.order_sn,
							payment: 'wallet'
						},
						'请稍等'
					).then((res) => {
						if (res.code === 1) {
							resolve(res.data);
						} else {
							reject();
						}
					});
				});
			},
			switch2Change() {
				
				this.switch2Checked = !this.switch2Checked;
			},

			// 获取购买须知
			async letllustrate() {
				await this.getProtocol();
				this.showIllustrate = true;
			},
			getProtocol() {
				this.$http('v1.getProtocol', {
						id: 2,
					})
					.then((res) => {
						if (res.code === 1) {
							this.illustrate = res.data[0].content;
						}
					})
					.catch(() => {});
			},
			//获取运费说明
			getyunPrice() {
				this.$http('v1.getProtocol', {
						id: 3,
					})
					.then((res) => {
						if (res.code === 1) {
							this.yunPrice = res.data[0].content;
						}
					})
					.catch(() => {});
			},
			//确认发货并立即支付
			async toPay() {
				if (this.switch2Checked == true) {
					if (JSON.stringify(this.addressList) != '{}') {
						//确认发货
						let res = await this.$http(
							'v1.yesDeliver', {
								ids: this.ids, //商品id集
								remark: this.remark, //备注
								address_id: this.addressList.id, //收货地址id
							},
							'请稍等'
						);
						if (res.code === 1) {
							
							this.order_sn = res.data.order_sn;
							this.payModOpen = true;
							this.payDetails.total_amount = this.boxData.postage;
							this.payDetails.discounts_amount = 0.0;
							this.payDetails.original_amount = this.boxData.postage;
							this.payDetails.order_sn = this.order_sn;
							this.payDetails.money = res.data.money;
							this.payDetails.auto_close_time = 120
						}
					} else {
						uni.showToast({
							title: '未添加收货地址',
							duration: 2000,
							icon: 'error',
						});
					}
				} else {
					uni.showToast({
						title: '未勾选购买须知',
						duration: 2000,
						icon: 'error',
					});
				}
			},
			//确认发货不用支付
			async toFahuo() {
				if (this.switch2Checked == true) {
					if (JSON.stringify(this.addressList) != '{}') {
						//确认发货
						let res = await this.$http(
							'v1.yesDeliver', {
								ids: this.ids, //商品id集
								remark: this.remark, //备注
								address_id: this.addressList.id, //收货地址id
							},
							'请稍等'
						);
						if (res.code === 1) {
							this.CartOnshow(true);
							//将本次使用的地址存入本地存储
							uni.setStorageSync('addressKey', this.addressList);
							uni.navigateTo({
								url: 'pages/hegui/components/successFahuo',
							});
						}
					} else {
						uni.showToast({
							title: '未添加收货地址',
							duration: 2000,
							icon: 'error',
						});
					}
				} else {
					uni.showToast({
						title: '未勾选购买须知',
						duration: 2000,
						icon: 'error',
					});
				}
			},
			//跳转修改地址
			toAddress() {
				this.$Router.push({
					path: '/pages/user/address/list',
					query: {
						selectAd: true
					},
				});
			},
			//选择优惠券弹出层
			showUseCoupon() {
				this.showCoupon = true;
			},
			noshowCoupon(val) {
				this.showCoupon = val;
			},
			onClickHandle(ev, name, data = {}) {
				_delay(() => {
					switch (name) {
						case 'toPay':
							this.toPay();
							break;
						case 'toFahuo':
							this.toFahuo();
							break;
						case 'toAddress':
							this.toAddress();
							break;
						case 'letllustrate':
							this.letllustrate();
							break;
						case 'showUseCoupon':
							this.showUseCoupon();
							break;
					}
				});
			},
			// 显示隐藏支付
			changePayMod(ev) {
				uni.switchTab({
					url:"/pages/index/cart"
				})
				// this.payModOpen = ev;
				// this.payDetails = {};
			},
			//支付结果
			onPayed() {
				
				this.payModOpen = false;
				this.CartOnshow(true);
				//将本次使用的地址存入本地存储
				uni.setStorageSync('addressKey', this.addressList);
				uni.redirectTo({
					url:"/pages/hegui/components/successFahuo"
				})
			},
			//使用优惠券
			useCoupon() {
				this.showCoupon = false;
				this.isSelectCoupon = true;
			},
		},
	};
</script>
<style lang="scss" scoped>
	.fahuo {
		.fahuo_main {
			padding: 20rpx 54rpx 140rpx;

			.topA {
				width: 640rpx;
				height: 118rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding-top: 50rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				box-sizing: border-box;
				background-image: url(./images/xuxian.png);
				background-size: cover;
				background-repeat: no-repeat;

				.top_box {
					width: 100%;
					height: 20rpx;
					align-items: center;

					.left {
						float: left;
						margin-right: 14rpx;
					}

					.add_text {
						float: left;
						font-size: 21rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #3d3d3d;
						line-height: 20rpx;
					}

					.right {
						float: right;
					}
				}
			}

			.topB {
				width: 640rpx;
				height: 118rpx;
				background: #ffffff;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding-left: 4rpx;
				padding-top: 4rpx;
				padding-right: 4rpx;
				box-sizing: border-box;
				background-image: url(./images/xuxian.png);
				background-size: cover;
				background-repeat: no-repeat;

				.top_box {
					height: 111rpx;
					display: flex;
					align-items: center;
					background-color: #fff;

					.left {
						width: 48rpx;
						height: 22rpx;
						background: #d5c7ff;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-size: 14rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #3d3d3d;
						line-height: 22rpx;
						text-align: center;
						margin-left: 35rpx;
					}

					.center {
						flex: 1;
						margin-left: 30rpx;

						.top {
							margin-top: -10rpx;

							.first {
								font-size: 18rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: 400;
								color: #3d3d3d;
								// line-height: 24rpx;
							}

							.last {
								font-size: 16rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: 400;
								color: #3d3d3d;
								margin-left: 20rpx;
							}
						}

						.bottom {
							font-size: 18rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 400;
							color: #939393;
							margin-top: 12rpx;
						}
					}

					.right {
						margin-right: 28rpx;
					}
				}
			}

			.main {
				margin-top: 18rpx;
				width: 100%;
				padding: 20rpx 22rpx;
				background: #ffffff;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				.title {
					font-size: 22rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 700;
					color: #111111;
				}

				.box {
					width: 100%;
					height: 160rpx;
					display: flex;
					margin-top: 34rpx;
					margin-bottom: 26rpx;

					img {
						width: 160rpx;
						height: 160rpx;
					}

					.right_box {
						margin-left: 23rpx;
						flex: 1;

						.biaoti {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 700;
							color: #111111;
						}

						.biaoqian {
							margin-top: 6rpx;
							margin-bottom: 9rpx;

							.biaoqian_box {
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								opacity: 1;
								border: 1rpx solid #d5c7ff;
								padding: 7rpx;
								font-size: 18rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 400;
								color: #d5c7ff;
								margin-right: 12rpx;
								display: inline-block;
								box-sizing: border-box;
							}
						}

						.shuoming {
							font-size: 18rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #8c8c8c;
						}

						.price_line {
							display: flex;
							justify-content: space-between;

							.price {
								.fuhao {
									font-size: 28rpx;
									font-family: Source Han Sans CN-Normal, Source Han Sans CN;
									font-weight: 350;
									color: #de3249;
								}

								.price_num {
									font-size: 28rpx;
									font-family: DIN-Bold;
									font-weight: 700;
									color: #de3249;
								}
							}

							.shu_box {
								box-sizing: border-box;
								padding: 0 24rpx;
								background: #ffffff;
								border-radius: 214rpx 214rpx 214rpx 214rpx;
								opacity: 1;
								border: 1rpx solid rgba(204, 204, 204, 0.6);
								text-align: center;
								line-height: 32rpx;

								.fuhao {
									font-size: 20rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 400;
									color: #3d3d3d;
								}

								.shuliang {
									font-size: 24rpx;
									font-family: Oswald-Regular, Oswald;
									font-weight: 700;
									color: #3d3d3d;
								}
							}
						}
					}
				}

				.line {
					width: 100%;
					height: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 26rpx;

					.left {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #111111;
					}

					.right {
						font-size: 18rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #8c8c8c;

						.icon {
							margin-left: 20rpx;
						}
					}
				}

				.beizhu {
					display: flex;
					width: 100%;
					height: 40rpx;
					align-items: center;
					margin-bottom: 26rpx;

					.left {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #111111;
						margin-right: 44rpx;
					}

					/deep/ input {
						font-size: 18rpx;
						flex: 1;
					}
				}

				.bottom {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-bottom: 26rpx;

					.xiaoji {
						font-size: 16rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #111111;
						margin-right: 30rpx;
					}

					.fuhao {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #de3249;
					}

					.price {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 700;
						color: #de3249;
					}
				}
			}

			.shuoming_box {
				width: 640rpx;
				background: #ffffff;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-top: 30rpx;

				.title {
					font-size: 22rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 700;
					color: #111111;
					margin-left: 22rpx;
					height: 40rpx;
					line-height: 50rpx;
					padding-top:7px;
				}

				.text {
					width: 100%;
					height: 69rpx;
					padding-left: 62rpx;
					padding-right: 22rpx;
					padding-bottom: 16rpx;
					font-size: 18rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #939393;
					line-height: 30rpx;
				}
			}

			.mustKnow {
				height: 36rpx;
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 18rpx;

				.left {
					font-size: 22rpx;
					font-family: PingFangSC-Light-Regular, PingFangSC-Light;
					font-weight: 400;
					color: #646465;
				}

				.right {
					font-size: 22rpx;
					font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
					font-weight: 400;
					color: #111111;
				}
			}
		}

		.pay {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: #fff;
			padding-right: 24rpx;

			.heji {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #111111;
				margin-right: 16rpx;
			}

			.fuhao {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #de3249;
			}

			.sum_price {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 700;
				color: #de3249;
			}

			.pay_btn {
				width: 207rpx;
				height: 76rpx;
				background: #a084f0;
				border-radius: 168rpx 168rpx 168rpx 168rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 76rpx;
				text-align: center;
				margin-left: 50rpx;
			}

			.quePay_btn {
				width: 207rpx;
				height: 76rpx;
				background: #2ce174;
				border-radius: 168rpx 168rpx 168rpx 168rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 76rpx;
				text-align: center;
				margin-left: 50rpx;
			}
		}
	}
</style>